<template>
  <div class="jp-center el-scrollbar__wrap">
    <!-- 头部 -->
    <div class="top">
      <el-carousel
        :interval="5000"
        arrow="always"
        class="top-left"
        height="100%"
      >
        <el-carousel-item
          v-for="(item, index) in ShufflingFigures"
          :key="index"
        >
          <img class="lbimg" :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="top-right">
        <div class="title">
          <div class="title-left">
            <i class="el-icon-document"></i> 新闻动态
          </div>
          <div class="title-right" @click="goNewsinformation">
            了解更多<i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div
          class="contents"
          v-for="(item, index) in newsArrayList"
          :key="index"
          @click="newsDetail(item.id)"
        >
          <div class="contents-title">{{ item.title }}</div>
          <div class="contents-date">{{ item.remarks }}</div>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="middle">
      <div class="middle-title">
        <div class="title">
          <div class="title-left"><i class="el-icon-menu"></i> 常用工具</div>
        </div>
      </div>
      <div class="middle-menu" style="border: 1px solid #fff">
        <!-- <div class="container">
                    <div class="dock">
                        <swiper class="swiper" :options="swiperOption">
                            <swiper-slide v-for="(item,index) in shortcut" :key="index">
                                <a @click="pageRouter(item.url)">
                                    <img :src=item.imgs alt="">
                                </a>
                            </swiper-slide>
                        </swiper>
                    </div>
                </div> -->
        <div id="container">
          <div id="dock">
            <ul>
              <!-- <swiper class="swiper" :options="swiperOption"> -->
              <li v-for="(item, index) in shortcut" :key="index">
                <!-- <swiper-slide> -->
                <a @click="pageRouter(item.url)">
                  <img :src="item.imgs" alt="" />
                </a>
                <!-- </swiper-slide> -->
              </li>
              <!-- </swiper> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom-natice">
        <div class="middle-title">
          <div class="title">
            <div class="title-left">
              <i class="el-icon-message-solid"></i> 通知公告
            </div>
            <div class="title-right" @click="goNoticenotice">
              了解更多<i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div
          class="contents"
          v-for="(item, index) in announcementNotice"
          :key="index"
          @click="announcementDetail(item.id)"
        >
          <div class="contents-title">
            {{ item.noticetitle }}
            <div :class="item.isread == 1 ? 'reminds' : ''"></div>
          </div>
          <div class="contents-date">{{ item.remarks }}</div>
        </div>
      </div>
      <div class="bottom-natice" style="margin-left: 10px">
        <div class="middle-title">
          <div class="title">
            <div class="title-left">
              <i class="el-icon-reading"></i> 学习资料
            </div>
            <div class="title-right" @click="goLearningmaterials">
              了解更多<i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div
          class="contents"
          v-for="(item, index) in studyNotice"
          :key="index"
          @click="studyDetail(item.id)"
        >
          <div class="contents-title">
            {{ item.datatitle }}
            <div :class="item.isread == 1 ? 'reminds' : ''"></div>
          </div>
          <div class="contents-date">{{ item.remarks }}</div>
        </div>
      </div>
      <div class="bottom-natice" style="margin-left: 10px">
        <div class="middle-title">
          <div class="title">
            <div class="title-left"><i class="el-icon-s-order"></i>日历</div>
          </div>
        </div>
        <div style="text-align: center">
          <j-date-picker
            v-model="value1"
            :width="width1"
            :placeholder="placeholder"
            :picker-options="pickerOptions"
            :rangeSeparator="rangeSeparator"
            @change="onDateChange"
            :disabled="disabled"
            :showLunarClass="showLunarClass"
            :showLunarControl="showLunarControl"
            :type="type"
            :showBackYears="showBackYears"
            :showLunarIcon="showLunarIcon"
            :format="format"
          ></j-date-picker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import JDatePicker from "../../../components/Calendars/JDatePicker.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  inject: ["reload"],
  components: {
    JDatePicker,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 12,
        freeMode: true,
        spaceBetween: 30,
      },
      //广告轮播
      Shuffling: [
        "https://img0.baidu.com/it/u=3824886304,665215047&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=3824886304,665215047&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=1747155899,4222803875&fm=26&fmt=auto&gp=0.jpg",
      ],
      ShufflingFigures: [],
      //快捷方式图标
      shortcut: [
        {
          imgs: require("@/assets/imgs/home/bxbf.png"),
          url: "/http://www.sxbxbkj.com/index.html",
        },
        {
          imgs: require("@/assets/imgs/home/dlxz.png"),
          url: "/http://zp.dlyrl.com/",
        },
        {
          imgs: require("@/assets/imgs/processManagement/05Index.png"),
          url: "/hiddenDirectory/addressBookDetail",
        },
        { imgs: require("@/assets/imgs/processManagement/37.png"), url: "" },
        {
          imgs: require("@/assets/imgs/processManagement/40.png"),
          url: "/mainhome/gameHome",
        },
        {
          imgs: require("@/assets/imgs/processManagement/39.png"),
          url: "/https://www.hao123.com/",
        },
        {
          imgs: require("@/assets/imgs/home/sr.png"),
          url: "/https://srpg.csia.org.cn/#/",
        },
      ],
      news: [],
      //日历组件字段
      value1: new Date(),
      type: "DATE",
      showLunarClass: "NUMBER",
      showBackYears: 2,
      showLunarIcon: true,
      showLunarControl: true,
      width1: "400",
      format: "YYYY.MM.DD",
      placeholder: "请输入内容",
      rangeSeparator: "-",
      disabled: false,
      editable: true,
      clearable: true,
      pickerOptions: {
        //          disabledDate (time) {
        //            return time.getTime() < Date.now() - 8.64e7;
        //          }
      },

      pageNoNews: 1,
      pageSizeNews: 8,
      newsArrayList: [], //新闻列表

      pageNoAnnouncement: 1,
      pageSizeAnnouncement: 9,
      announcementNotice: [], //通知公告

      pageNoStudy: 1,
      pageSizeStudy: 9,
      studyNotice: [], //学习公告
    };
  },
  mounted() {
    this.Carousel();
    this.getNewsLists();
    this.getAnnouncement();
    this.getStudy();
  },
  computed: {
    //用户名
    userName() {
      return JSON.parse(localStorage.getItem("user")).name;
    },
  },
  methods: {
    Carousel() {
      console.log("bbbbbb");
      this.$http({
        url: "/dlyrl/hr/userinformation/groupCarousel",
        method: "get",
      }).then((req) => {
        console.log("aaaaaaa", req);
        if (req.data.success) {
          if (req.data.imgs.length == 0) {
            this.ShufflingFigures = this.Shuffling;
          } else {
            this.ShufflingFigures = req.data.imgs;
          }
        }
      });
    },
    //新闻动态更多
    goNewsinformation() {
      this.$router.push("/hiddenDirectory/seeJournalism");
    },
    //通知公告更多
    goNoticenotice() {
      this.$router.push("/hiddenDirectory/seeNoticenotice");
    },
    //学习资料更多
    goLearningmaterials() {
      this.$router.push("/hiddenDirectory/seeLearningMaterials");
    },
    //日历组件
    onDateChange(e) {
      console.log("change=>", e, "value:", this.value1);
    },
    //查询新闻列表接口
    getNewsLists() {
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findnews?pageNo=" +
          this.pageNoNews +
          "&pageSize=" +
          this.pageSizeNews,
        method: "get",
      }).then((req) => {
        if (req.data.success) {
          this.newsArrayList = req.data.newsArrayList;
        }
      });
    },
    //新闻详情
    newsDetail(id) {
      console.log(id);
      this.reload();
      this.$router.push({
        path: "/hiddenDirectory/newsDetail",
        name: "newsDetail",
        params: {
          //一定要设置name，才可以传params
          id: id,
          remarks: 0,
        },
      });
    },
    //快捷方式
    //普通页面跳转 了解更多跳转
    pageRouter(url) {
      this.reload();
      this.$store.commit("user/companyId", "");
      this.$store.commit("common/fatherMeanNames", "山西北小北科技有限公司");
      console.log(this.$store.state.user.companyId);
      this.$router.push({
        path: url,
      });
    },
    //流程跳转
    addressFlowRouter(processName, procDefId, procDefKey) {
      if (processName == "" || procDefId == "" || procDefKey == "") {
        this.$message.warning("该功能正在开发中");
      } else {
        let tabTitle = "发起流程【" + processName + "】";
        let processTitle =
          `${this.userName} 在 ${this.moment(new Date()).format(
            "YYYY-MM-DD HH:mm"
          )} 发起了 [` +
          processName +
          "]";
        this.$http({
          url: "/flowable/task/getTaskDef",
          method: "get",
          params: {
            procDefId: procDefId,
            status: "start",
          },
        }).then(({ data }) => {
          if (data.success) {
            this.$router.push({
              path: "/flowable/task/TaskForm",
              query: {
                procDefId: procDefId,
                procDefKey: procDefKey,
                status: "start",
                title: tabTitle,
                formType: data.flow.formType,
                formUrl: data.flow.formUrl,
                formTitle: processTitle,
              },
            });
          }
        });
      }
      x;
    },
    //通知公告列表
    getAnnouncement() {
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findCompanyNotice?pageNo=" +
          this.pageNoAnnouncement +
          "&pageSize=" +
          this.pageSizeAnnouncement +
          "&userId=" +
          this.$store.state.user.id +
          "&companyId=1",
        method: "get",
      }).then((req) => {
        if (req.data.success) {
          // console.log("通知公告",req);
          this.announcementNotice = req.data.list;
        }
      });
    },
    //跳转通知公告详情页
    announcementDetail(id) {
      // console.log(id);
      this.reload();
      this.$router.push({
        path: "/hiddenDirectory/announcementsDetail",
        name: "announcementsDetail",
        params: {
          id: id,
          remarks: 0,
        },
      });
    },
    //学习公告列表
    getStudy() {
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findMaterialList?pageNo=" +
          this.pageNoStudy +
          "&pageSize=" +
          this.pageSizeStudy +
          "&userId=" +
          this.$store.state.user.id +
          "&companyId=1",
        method: "get",
      }).then((req) => {
        if (req.data.success) {
          // console.log("学习公告",req)
          this.studyNotice = req.data.list;
        }
      });
    },
    //跳转学习详情页
    studyDetail(id) {
      // console.log(id);
      this.reload();
      this.$router.push({
        path: "/hiddenDirectory/learningMaterialsDetail",
        name: "learningMaterialsDetail",
        params: {
          id: id,
          remarks: 0,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 100%;
}

.jp-center {
  height: calc(100% - 0px) !important;
  padding: 0px !important;
  margin-left: 0px !important;
}
// 头部
.top {
  height: 35vh;
  // height: 33%;
  display: flex;
  background-color: #eee;
  &-left {
    width: 60%;
  }
  .lbimg {
    width: 100%;
    height: 100%;
  }
  &-right {
    background: white;
    width: 40%;
    margin-left: 10px;
    .title {
      font-size: 12px;
      color: white;
      background: #3ca2e0;
      display: flex;
      margin-bottom: 7px;
      padding: 0 5px;
      height: 25px;
      &-left {
        width: 40%;
        line-height: 25px;
      }
      &-right {
        width: 60%;
        text-align: right;
        line-height: 25px;
        cursor: pointer;
      }
    }
    .contents {
      display: flex;
      padding: 5px 13px;
      color: #393939;
      margin-top: 10px;
      cursor: pointer;
      font-size: 12px;
      &-title {
        flex: 1;
      }
    }
  }
}
//中间
.middle {
  // height: 13%;
  background: white;
  margin-top: 10px;
  width: 100%;
  height: 13vh;
  .title {
    display: flex;
    font-size: 12px;
    color: white;
    background: #3ca2e0;
    display: flex;
    padding: 0 5px;
    height: 25px;
    &-left {
      width: 40%;
      line-height: 25px;
    }
  }
  &-menu {
    .line {
      margin: 0 auto;
      width: 45%;
      height: 5px;
      background: #fff;
      border-radius: 20px 60px 20px 50px;
    }
    #container #dock {
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }
    #container {
      text-align: center;
      right: 20%;
      left: 10%;
      //   width: 79%;
    }

    #container li {
      list-style-type: none;
      display: inline-block;
      position: relative;
      // padding-bottom: 10px;
    }

    #container li img {
      width: 50px;
      height: 50px;
      margin: 0 1em;
      -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left
            bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.5)));
      -webkit-transition: all 0.3s;
      -webkit-transform-origin: 40% 70%;
    }

    #container li:hover img {
      -webkit-transform: scale(2);
      margin: 0 2em;
    }

    #container li:hover + li img,
    #container li.prev img {
      -webkit-transform: scale(1.5);
      margin: 0 1.5em;
    }
  }
}
// 底部
.bottom {
  height: 50vh;
  margin-top: 10px;
  display: flex;
  background-color: #eee;
  &-natice {
    height: 100%;
    background: white;
    flex: 1;
    .reminds {
      margin: 3.5px 0 0 3px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: red;
    }
    .title {
      font-size: 12px;
      color: white;
      background: #3ca2e0;
      display: flex;
      margin-bottom: 7px;
      padding: 0 5px;
      height: 25px;
      &-left {
        width: 40%;
        line-height: 25px;
      }
      &-right {
        width: 60%;
        text-align: right;
        line-height: 25px;
        cursor: pointer;
      }
    }
    .contents {
      display: flex;
      padding: 5px 13px;
      color: #393939;
      margin-top: 10px;
      font-size: 12px;
      cursor: pointer;
      &-title {
        flex: 1;
        display: flex;
      }
    }
  }
}
//日历组件
.bulletin-content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  height: 91%;
}
pageModule {
  width: 100% !important;
  height: 315px !important;
}
pagescroll {
  position: relative;
  z-index: 1;
}
</style>